<template>
	<view>
		<!-- <view class="top">
			<image src="@/static/img/san.png" class="san" @tap="goBack()"></image>
			<view class="title">
				抽奖
			</view>
		</view> -->
		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			 @clickLeft="goBack"></uni-nav-bar>
		<view class="quan" v-if="zhezhao"></view>
		<view class="tan1" v-if="kaijiang==1" @tap="clskaijiang">
			<view class="ok" style="margin: 0 auto;">谢谢参与</view>
		</view>

		<view class="tan1" v-if="kaijiang==2" @tap="clskaijiang">
			<view class="cz">恭喜抽中</view>
			<view class="cdd">
				<view class="xianj">现金红包</view>
				<view class="red">100元</view>
			</view>

		</view>


		<view class="tan">
			<view class="ok" style="margin: 0 auto;margin-top:20%;" @tap="choujiangtap">抽奖</view>

			<view class="di">
				<view class="cc">
					抽一个就添加一个中奖者
				</view>
				<view class="wx" v-for="(item,index) in zhongjiangNo" :key="index">
					微信号：{{item}}
				</view>				
			</view>
		</view>

	</view>
</template>

<script>
	import redFoor from '@/components/red/index.vue'
	import wenti from '@/components/red/wenti.vue'
	import top from '@/components/red/top.vue'
	import {
		index
	} from "@/api/classification";
	export default {
		components: {
			redFoor,
			wenti,
			top
		},
		data() {
			return {
				wen: 0,
				listType: [],
				index: 0,
				list: [],
				zhezhao: false,
				kaijiang: 3,
				choujiang: 0,
				zhongjiangNo: []
			}
		},
		onLoad(option) {
			var id = option.id;
			this.getZhongjiangNo(id);
		},
		methods: {
			getZhongjiangNo(id) {
				this.zhongjiangNo = [
					"158****8968", "158****3658", "158****3634", "189****6525", "152****6596", "182****3201"
				];
			},
			clskaijiang() {
				this.kaijiang = 3;
				this.zhezhao = false;
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
			choujiangtap() {
				this.zhezhao = true;
				this.kaijiang = 2;
			},
			canyu() {
				this.choujiang = 1;
				this.zhezhao = true;
			},
			select(index) {
				this.index = index
			},
			selMerchant(id) {
				uni.navigateTo({
					url: '/pages/red/tuiguang?id=' + id
				})
			},
			nato(url) {
				uni.navigateTo({
					url
				})
			},
			wenti() {
				this.wen = 1
			},

		}
	}
</script>


<style>
	.top {
		color: #3D3D3D;
		font-size: 35upx;
		text-align: center;
		margin-top: 15%;
	}

	.san {
		width: 20upx;
		height: 30upx;
		position: absolute;
		left: 0;
	}

	.bg {
		width: 100%;
		height: 200upx;
	}

	.zhong {
		padding-top: 5%;

	}

	.tt1 {
		color: #3D3D3D;
		font-size: 35upx;
		font-weight: 600;
	}

	.tt2 {
		color: #3D3D3D;
		margin-top: 5%;
	}

	.jiang {
		width: 90%;
		border: 1px solid #929292;
		margin: 0 auto;
		margin-top: 8%;
		padding: 3%;
		border-radius: 15upx;
	}

	.jiang_top {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #D8D8D8;
		padding-bottom: 2%;

	}

	.jiang_title {
		width: 25%;
		color: #3D3D3D;
		display: flex;
		justify-content: center;
	}

	.xinxi {
		display: flex;
		margin-top: 5%;
	}

	.ww {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3D3D3D;
		font-weight: 600;
	}

	.wen_f {
		width: 95%;
		margin: 0 auto;
		border: 1px solid #929292;
		margin-top: 8%;
		border-radius: 15upx;
	}

	.ok {
		background-color: #FC0000;
		color: #FFFFFF;
		width: 450upx;
		height: 100upx;
		font-size: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 20%;
		padding-top: 3%;
		padding-bottom: 3%;
		border-radius: 45upx;
		margin-bottom: 15%;
	}

	.t1 {
		text-align: center;
	}

	.quan {
		position: fixed;
		z-index: 9;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #000000;
		opacity: 0.5;

	}

	.tan {
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		width: 95%;
		top: 25%;
		border-radius: 15upx;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.tan1 {
		position: fixed;
		z-index: 99;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		width: 95%;

		border-radius: 15upx;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.di {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
	}

	.cc {
		color: #3D3D3D;
		font-weight: 600;
	}

	.wx {
		color: #3D3D3D;
		font-size: 32upx;
		margin-top: 2%;
	}

	.cz {
		text-align: center;
		color: #3D3D3D;
		font-size: 35upx;
	}

	.cdd {
		display: flex;
		width: 60%;
		margin: 0 auto;
		margin-top: 8%;
		justify-content: space-between;
	}

	.red {
		color: #FF0000;
		font-weight: 700;
		display: flex;
		align-items: center;
	}

	.xianj {
		background-color: #FF0000;
		color: #fff;
		padding: 3%;
		border-radius: 15upx;
		padding-left: 4.5%;
		padding-right: 4.5%;
	}
</style>